iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

JavaScript 菜鳥研究室系列 第 7

菜鳥日記Day 7-用for迴圈撈取座標資訊並增加標記

  • 分享至 

  • xImage
  •  

前幾天我學會如何使用手動的方式,使用Google地圖將座標位置一個一個撈出來,並標記在森林步道的網站地圖裡。
但使用手動方法撈取資料,真的太沒效率了!所以我就在想,能否使用for迴圈的方式,將JSON資料庫裡的座標資訊撈出來,並自動將其標註在整張地圖上。

後來我發現能透過下列這段語法將座標資訊打撈出來,並增加標記與註釋在地圖上,其語法如下
https://ithelp.ithome.com.tw/upload/images/20200921/20130039aV44kRDtN2.png

  1. 增加標記至地圖層L.marker([]).addTo(map),中框號裡的內容是JSON資料庫裡緯度與經度的座標。
  2. 使用bindPopup語法在標記上增加文字內容,HTML標籤的外面須加上引號,文字才能正常顯示唷。

撈出座標資訊並加上說明文字後,口罩地圖就大致上完成啦~
https://ithelp.ithome.com.tw/upload/images/20200921/20130039WZdCqj5bug.png

但使用這個方法,有個很明顯的缺點,就是得同時載入數百張,甚至數千張的marker.png檔
在開啟地圖後,會發現網站非常lag...
所以明天我們要繼續探討,如何提高網站運作的效能,提高使用者體驗。


上一篇
菜鳥日記Day 6-在地圖上增加圓圈與多邊形標示
下一篇
菜鳥日記Day 8-使用MarkerCluster增加網頁讀取效能
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言